import React, { useState } from "react";
import classes from "./SlotInput.module.scss";
import Calendar from "react-calendar";
import dayjs from "dayjs";
import "../../assets/css/Calendar.css";
import calendarSvg from "../../assets/svg/calendar.svg";
export default function SlotInput({ theme, item: { name, type, active }, children }) {
    const [date, setDate] = useState(dayjs().format("YYYY-MM-DD hh:mm:ss"));
    const [show, setShow] = useState(false);
    const handleClick = () => {
        console.log(show);
        setShow(!show);
    };
    return (
        <div className={`${classes.slotInput} ${active && classes.active}`}>
            <div className={classes.title}>{name}</div>

            {type === "date" ? (
                <>
                    <div
                        onClick={handleClick}
                        className={classes.input}
                        style={{
                            color: theme === "light" ? "#252525" : "#fff",
                            background: theme === "light" ? "#fff" : "#252525",
                            boxShadow: `3rem 5rem 25rem ${theme === "light" ? "#e9e9e9" : "#222"}`,
                        }}
                    >
                        {dayjs(date).format("YYYY-MM-DD hh:mm:ss")}
                        <img style={{ filter: theme === "light" ? "drop-shadow(#3b3dbf 300rem 0)" : "drop-shadow(rgb(255, 255, 255) 300rem 0)" }} src={calendarSvg} alt="date" />
                    </div>
                    {show && <Calendar className={classes.calendar} onChange={setDate} value={date} />}
                </>
            ) : (
                <input
                    className={classes.input}
                    style={{
                        color: theme === "light" ? "#252525" : "#fff",
                        background: theme === "light" ? "#fff" : "#252525",
                        boxShadow: `3rem 5rem 25rem ${theme === "light" ? "#e9e9e9" : "#222"}`,
                    }}
                    type={type}
                />
            )}
            {children}
        </div>
    );
}
